// add map area panelId
var dopBtnBaseInfoAdd = "";
var mapManager = null;
var isModify = false;
$("#dop_datagrid_baseInfo").datagrid({
	url : "",
	height : 350,
	pagination : true,
	fitColumns : false,
	singleSelect : false,
	fit : true,
	pageSize : 10,
	pageList : [10, 30, 50, 100],
	sortOrder : 'desc',
	rownumbers : true,
	showFooter : true,
	frozenColumns : [[]],
	columns : [[{
		field : 'ck',
		checkbox : true
	}, {
		field : "id",
		width : 150,
		title : "主键",
		hidden : true
	}, {
		field : "baseAreaName",
		width : 150,
		title : "区域名称",
		halign:"center",
		align:'left'
	},{
		field : "baseEnable",
		width : 80,
		title : "状态",
		align:'center',
		formatter:function(value,row,index){
			if(value==1){
				return "启用";
			}else{
				return "停用";
			}
		}
	},{
		field : "createUser",
		width : 150,
		title : "创建人",
		hidden : true
	}, {
		field : "createUserName",
		width : 150,
		title : "创建人",
		align:'center'
	}, {
		field : "createDate",
		width : 150,
		title : "创建时间",
		align:'center'
	}, {
		field : "updateUser",
		width : 150,
		title : "修改人",
		hidden : true
	}, {
		field : "updateUserName",
		width : 150,
		title : "修改人",
		align:'center'
	}, {
		field : "updateDate",
		width : 150,
		title : "修改时间",
		align:'center'
	}, {
		field : "baseCoordinate",
		width : 350,
		title : "坐标",
		hidden : true
	}]]
});

init();

// click pagination
var p = $("#dop_datagrid_baseInfo").datagrid('getPager');
$(p).pagination({
	onSelectPage : function(pageNumber, pageSize)
	{
		var params = $.extend({
			pageNum : pageNumber,
			pageSize : pageSize
		}, getQueryParams());
		EapTools.doAction("areaController.do?queryByPage", params, true, function(data)
		{
			$("#dop_datagrid_baseInfo").datagrid('loadData', {
				"rows" : data.list,
				"total" : data.count
			} || {});
		});
	}
});
// show map
mapManager = new ExpLink.ExpdopMap();
mapManager.initializeMap({
	map : 'dop_baseInfo_add_panel_map'
});

// 新添加区域 。 因为需要进行确认，所以不自动更新
mapManager.add(ExpLink.ExpdopDrawRegionManager.EventType.NEWPOLYGON, function(e)
{
});
// 编辑区域
mapManager.add(ExpLink.ExpdopDrawRegionManager.EventType.SAVEEDIT, function(e)
{
	// 编辑结果
	var modifyRegion = e.target;
	var baseAreaName = $.trim($("#dop_baseInfo_add_panel_input_area").val());
	if(baseAreaName.length==0) 
	{
		layer.tips('请填写区域名', document.getElementById("dop_baseInfo_add_panel_input_area"), {
			guide : 1,
			time : 2
		});
		return;
	}
	// 对编辑的区域进行更新
	// 直接调用方法进行更新
	// 1.更新数据库
	// id 和 baseAreaName 无法取到.可以根据uid进行更新
	EapTools.doAction("areaController.do?modifyByUid", {
		"uid" : modifyRegion.id,
		"baseAreaName":baseAreaName,
		"baseCoordinate" : JSON.stringify(modifyRegion),
		"mapcenterLng" : modifyRegion.center.lng,
		"mapcenterLat" : modifyRegion.center.lat
	}, true, function(data)
	{
		if(data.success)
		{			
			EapTip.msgOk("保存成功！");
			layer.close(dopBtnBaseInfoAdd);
			init();
		}
	});

	// 2.更新列表
	// 获取当前页的数据，按照uid进行匹配

});
// 警告
mapManager.add(ExpLink.ExpdopDrawRegionManager.EventType.WARNING, function(e)
{

});

// 开始编辑对象时发生
mapManager.add(ExpLink.ExpdopDrawRegionManager.EventType.EDITING, function(e)
{

	resetColorPicker(e.target);

});

function resetColorPicker(styleOptions)
{
	// 填充颜色选择器
	var fillColor = new tinycolor(styleOptions.fillColor);
	fillColor.setAlpha(styleOptions.fillOpacity);
	$("#dop_baseInfo_add_panel_top_fillcolor").spectrum('set', fillColor);

	// 边框颜色选择器
	var lineColor = new tinycolor(styleOptions.strokeColor);
	lineColor.setAlpha(styleOptions.strokeOpacity);
	$("#dop_baseInfo_add_panel_top_linecolor").spectrum('set', lineColor);

	// 线宽

	$("#dop_baseInfo_add_panel_top_linewidth").val(styleOptions.strokeWeight);
}

/**
 * 显示地图所在的dialog
 */
function showMapPanel(title)
{
	dopBtnBaseInfoAdd = jQuery.layer({
		type : 1,
		title : '<div><i class="icon-map-marker" style="margin-top:3px;"></i><span style="padding-left: 14px;line-height: 14px;">'+title+'</span></div>',
		shadeClose : true,
		maxmin : false,
		fix : false,
		area : [1000, 540],
		page : {
			dom : '#dop_baseInfo_add_panel'
		}
	});
}

/**
 * 设置区域的风格选项
 */
initializeStyleOptions();

// bind add event
$("#dop_btn_baseInfo_add").click(function()
{
	isModify = false;
	// show map dialog
	showMapPanel("添加区域");
	// 清除地图中所有覆盖物
	mapManager.clearOverlays();
	
	
	$("#dop_baseInfo_add_panel_input_area").val("");
	// 通过ajax获取相关的区域，并启动添加
	// 暂时可以选择添加全部的列表中的区域
	// 第一页 50个元素
	var params = {
		pageNum : 1,
		pageSize : 50,
		baseAreaName : ""
	};
	var relationRegions = [];
	// 同步ajax调用
	EapTools.doAction("areaController.do?queryList", params, false, function(data)
	{
		if(data)
		{
			for (var inte = 0, length = data.list.length; inte < length; inte++)
			{
				relationRegions.push(data.list[inte].baseCoordinate);
			}
		}
	});

	// 显示添加中使用到的按钮
	$(".dop-region-edit").show();

	// var selections = $("#dop_datagrid_baseInfo").datagrid();
	mapManager.startDrawRegion({
		exists : relationRegions
	});
});

// bind modify event
$("#dop_btn_baseInfo_modify").click(function()
{
	var selections = $("#dop_datagrid_baseInfo").datagrid("getSelections");
	if(selections && selections.length > 0)
	{
		if(selections.length > 1)
		{
			layer.tips('请选择一行数据', this, {
				guide : 2,
				time : 2
			});
		}
		else
		{
			// 显示地图div
			showMapPanel("修改区域");
			// 获得此项记录的多边形信息
			var polygon = selections[0].baseCoordinate;

			// 获取相关显示的区域
			var existsRegions = [];
			// 暂时可以选择添加全部的列表中的区域
			// 第一页 50个元素
			var params = {
				pageNum : 1,
				pageSize : 50,
				baseAreaName : ""
			};
			// 同步ajax调用
			EapTools.doAction("areaController.do?queryList", params, false, function(data)
			{
				if(data)
				{
					for (var inte = 0, length = data.list.length; inte < length; inte++)
					{
						if(selections[0].id != data.list[inte].id)
						{
							// 根据id排除当前选中对象
							existsRegions.push(data.list[inte].baseCoordinate);
						}
					}
				}
			});

			// 开启编辑状态
			mapManager.startDrawRegion({
				overlay : polygon,
				exists : existsRegions
			})
			// 更新区域名称的显示
			$("#dop_baseInfo_add_panel_input_area").val(selections[0].baseAreaName);

			// 更新风格选择器中的当前区域的渲染风格。
			var styles = JSON.parse(polygon);
			resetColorPicker(styles.styleOptions);

			// 隐藏区域编辑中不会使用到的按钮
			$(".dop-region-edit").hide();

		}
	}
	else
		layer.tips('请选择要修改行', this, {
			guide : 2,
			time : 2
		});
});

// bind delete event
$("#dop_btn_baseInfo_delete").click(function()
{
	var selections = $("#dop_datagrid_baseInfo").datagrid("getSelections");
	if(selections && selections.length > 0)
		layer.confirm('确定删除吗？', function()
		{
			var areaIdArray = [];
			for (var i = 0; i < selections.length; i++)
			{
				areaIdArray.push(selections[i].id);
			}

			EapTools.doAction("areaController.do?delete", {
				"areaIdList" : areaIdArray
			}, true, function(data)
			{
				if(data.success)
				{
					EapTip.msgOk("删除成功！");
					init();
				}
			});
		});
	else
		layer.tips('请选择要删除行', this, {
			guide : 2,
			time : 2
		});
});

$(function(){
	//将启用状态改为停用
	$("#dop_btn_baseInfo_unEnabled").click(function(){
		var selections = $("#dop_datagrid_baseInfo").datagrid("getSelections");
		if(selections.length > 0){
			layer.confirm("确认要停用区域吗?",function(){
				var areaIdArray = [];
				for (var i = 0; i < selections.length; i++)
				{
					areaIdArray.push(selections[i].id);
				}
				EapTools.doAction("areaController.do?unEnabled",{
					"areaIdList" : areaIdArray
				},true,function(data){
					if(data.success){
						EapTip.msgOk("操作成功！");
						init();
					}
				});
			});
		}
	});
	//将停用状态改为启用
	$("#dop_btn_baseInfo_enabled").click(function(){
		var selections = $("#dop_datagrid_baseInfo").datagrid("getSelections");
		if(selections.length > 0){
			layer.confirm("确认要启用区域吗?",function(){
				var areaIdArray = [];
				for (var i = 0; i < selections.length; i++)
				{
					areaIdArray.push(selections[i].id);
				}
				EapTools.doAction("areaController.do?enabled",{
					"areaIdList" : areaIdArray
				},true,function(data){
					if(data.success){
						EapTip.msgOk("操作成功！");
						init();
					}
				});
			});
		}
	});
});

// bind query event
$("#dop_btn_baseInfo_query").click(function()
{
	init();
});

// bind map panel reset event
$("#dop_baseInfo_add_panel_btn_reset").click(function()
{
	mapManager.reDraw();
});

// bind map panel modify event
$("#dop_baseInfo_add_panel_btn_modify").click(function()
{
	mapManager.editDrawRegion();
});

// bind map panel save event
$("#dop_baseInfo_add_panel_btn_save").click(function()
{
	mapManager.saveEditDrawRegion();
});

// bind map panel submit event
$("#dop_baseInfo_add_panel_btn_submit").click(function()
{
	var polygon = mapManager.getNewDrawRegion(), baseAreaName = $.trim($("#dop_baseInfo_add_panel_input_area").val());
	if(!polygon)
	{
		return;
	}
	if(baseAreaName.length==0) 
	{
		layer.tips('请填写区域名', document.getElementById("dop_baseInfo_add_panel_input_area"), {
			guide : 1,
			time : 2
		});
		return;
	}
	if(polygon)
	{
		// 新增数据
		EapTools.doAction("areaController.do?create", {
			"baseAreaName" : baseAreaName,
			"baseCoordinate" : JSON.stringify(polygon),
			uid : polygon.id,
			mapcenterLng : polygon.center.lng,
			mapcenterLat : polygon.center.lat
		}, false, function(data)
		{
			if(data.success)
			{
				layer.close(dopBtnBaseInfoAdd);
				EapTip.msgOk("提交成功！");
				init();
			}
		});
	}

	// 结束地图的编辑状态
	mapManager.stopDrawRegion();

});

// bind map panel cancel event
$("#dop_btn_baseInfo_cancel").click(function()
{
	layer.close(dopBtnBaseInfoAdd);

	// 结束地图的编辑状态
	//mapManager.stopDrawRegion();
	mapManager.endWithoutSave();
});

// get params
function getQueryParams()
{
	return {
		baseAreaName : $("input[code='baseAreaName']").val()
	};
}

// init
function init()
{
	// init
	var options = $("#dop_datagrid_baseInfo").datagrid('getPager').data("pagination").options;
	var pageSize = options.pageSize;
	var params = $.extend({
		pageNum : 1,
		pageSize : pageSize
	}, getQueryParams());
	EapTools.doAction("areaController.do?queryByPage", params, true, function(data)
	{
		$("#dop_datagrid_baseInfo").datagrid('loadData', {
			"rows" : data.list,
			"total" : data.count
		} || {});
		var p = $("#dop_datagrid_baseInfo").datagrid('getPager');
		$("td:last", p).find("a").click();
	});
}

/**
 * 初始化区域风格选项
 */
function initializeStyleOptions()
{
	// 边框颜色
	var lineC = new tinycolor("00f");
	lineC.setAlpha(0.6);
	$("#dop_baseInfo_add_panel_top_linecolor").spectrum({
		color : lineC,
		showAlpha : true,
		chooseText : "应用",
		cancelText : "取消",
		change : function(color)
		{
			var lineWidth = $('#dop_baseInfo_add_panel_top_linewidth').val();
			var fillColor = $("#dop_baseInfo_add_panel_top_fillcolor").spectrum('get');
			setStyleOptions(color.toHexString(), color.getAlpha(), 3, fillColor.toHexString(), fillColor.getAlpha());;
		}
	});

	// 填充颜色改变
	var fillC = new tinycolor("000");
	fillC.setAlpha(0.2);
	$("#dop_baseInfo_add_panel_top_fillcolor").spectrum({
		color : fillC,
		showAlpha : true,
		chooseText : "应用",
		cancelText : "取消",
		change : function(color)
		{
			var lineWidth = $('#dop_baseInfo_add_panel_top_linewidth').val();
			var lineColor = $("#dop_baseInfo_add_panel_top_linecolor").spectrum('get');
			setStyleOptions(lineColor.toHexString(), lineColor.getAlpha(), lineWidth, color.toHexString(), color.getAlpha());;
		}
	});

	// 线宽改变
	$('#dop_baseInfo_add_panel_top_linewidth').change(function(e)
	{
		var lineWidth = $('#dop_baseInfo_add_panel_top_linewidth').val();
		var fillColor = $("#dop_baseInfo_add_panel_top_fillcolor").spectrum('get');
		var lineColor = $("#dop_baseInfo_add_panel_top_linecolor").spectrum('get');
		setStyleOptions(lineColor.toHexString(), lineColor.getAlpha(), lineWidth, fillColor.toHexString(), fillColor.getAlpha());;
	});

	function setStyleOptions(lineColor, lineAlpha, lineWidth, fillColor, fillAlpha)
	{
		mapManager.setDefaultStyleOptions({
			strokeColor : lineColor, // 边线颜色。
			fillColor : fillColor, // 填充颜色。当参数为空时，圆形将没有填充效果。
			strokeWeight : lineWidth, // 边线的宽度，以像素为单位。
			strokeOpacity : lineAlpha, // 边线透明度，取值范围0 - 1。
			fillOpacity : fillAlpha, // 填充的透明度，取值范围0 - 1。
			strokeStyle : 'solid' // 边线的样式，solid或dashed。
		});
	}

}
